<template>
  <div id="dingd">
      <div class="box">
        <div class="top">
            <p>
              <span>我的订单</span>
              <span>
                全部订单
                <span></span>
              </span>
            </p>
            <div class="icon">
                <div>
                  <p class="iconfont icon-diandongche"></p>
                  <p>及时送</p>
                </div>
                <div>
                  <p class="iconfont icon-icon-"></p>
                  <p>次日达</p>
                </div>
                <div>
                  <p class="iconfont icon-truck"></p>
                  <p>全国送</p>
                </div>
                <div>
                  <p class="iconfont icon-pintuan1"></p>
                  <p>拼团</p>
                </div>
                <div>
                  <p class="iconfont icon-mendian"></p>
                  <p>门店订单</p>
                </div>
            </div>
        </div>
        <div class="bottom">
            <div class="left">
              <span><img src="@/assets/wode/ziban.jpg" alt=""></span>
              <p>
                <span>我的评价</span>
                <span>评价送积分</span>
              </p>
            </div>
            <div class="right">
              <span>
                <img src="@/assets/wode/jiaoban.jpg" alt="">
              </span>
              <span>三无退货</span>
            </div>
        </div>
      </div>
  </div>
</template>

<script>
export default {

}
</script>

<style scoped>
 #dingd{
   width: 100%;
   height: 2.2rem;
   background: rgb(227,227,227);
 }
 .box{
   width: 96%;
   margin-left: .06rem;
   height: 2.0rem;
   background: white; 
   border-radius: .15rem;
 }
 .top p{
   position: relative;
   padding-top: .1rem;
 }
 .top span:nth-child(1){
   margin-left: .05rem;
   font-weight: 600;
 }
 .top span:nth-child(2){
   margin-right: .05rem;
   float: right;
   font-size: .15rem;
 }
 .top .icon{
   display: flex;
   justify-content: space-between;
   margin: 0 .1rem .1rem .1rem;
 }
 .top .icon>div{
   text-align: center;
 }
 .top .icon .iconfont{
   font-size: .3rem;
   color: green;
 }
  .bottom img{
    height: .6rem;
    margin-left: .1rem;
    margin-top: .05rem;
  }
  .bottom{
    display: flex;
    position: relative;
  }
  .bottom .left{
    border: 1px solid gray;
    width: 1.7rem;
    height: .7rem;
    margin-left: .1rem;
    margin-top: .05rem;
    border-radius: .1rem;
  }
  .bottom .left p span:nth-child(2){
    font-size: .14rem;
  }
  .bottom .left p{
    width: .75rem;
    position: absolute;
    top: .18rem;
    left: 1rem;
  }
  .bottom .right{
    margin-right: .1rem;
    margin-top: .05rem;
    border: 1px solid gray;
    width: 1.7rem;
    height: .7rem;
    margin-left: .1rem;
    border-radius: .1rem;
  }
  .bottom .right span:nth-child(2){
    position: absolute;
    top: .3rem;
  }
</style>